自動横スクロールで始まるホームページ
今回は、ページを開くと同時に横スクロールを開始するホームページの作成方法を紹介します。ホームページは縦にスクロールするのが普通ですが、これを横スクロール、しかも自動スクロールにすると、ホームページをユニークに演出できます。タイトルページなどに活用してみてください。
サンプルページ

→ 横スクロール用のJavaScript関数を呼び出す
 
まずは、BODYタグで横スクロール用のJavaScript関数「pgscroll()」を呼び出します。これは、BODYタグにonLoadイベントを追加すれば実行できます。
<BODY bgcolor="#996633" text="#FFFFFF" onLoad="pgscroll()">
 


→ ページをTABLEで作成する
 
続いて、ホームページを作成します。今回は、メインコンテンツに横長の画像を配置しました。また、文字などが改行されないようにTABLEを使って要素を配置し、各セルにwidth属性を指定してページ全体の横幅を固定しています。
<TABLE border="0" width=1600 height="100%">
<TR>
<TD width="1400" valign="middle">
<IMG src="image.jpg" align="middle">
</TD>
<TD width="200" align="center" valign="middle">
<FONT size="4"><B>
栄光のゴールへ<BR>-Enter-
</B></FONT>
</TD>
</TR>
</TABLE>
 


→ 横スクロールのJavaScriptを作成する
 
あとは、自動的に横スクロールするJavaScript関数「pgscroll()」を作成すれば、ホームページの完成となります。この関数では、変数「x」の値を1つだけ増加し、それをスクロールの横位置に指定することにより、画面を右方向にスクロールさせていきます。スクロール位置を指定する「scrollTo()」には、カッコ内にx座標、y座標の値を指定します。最後に、「setTimeout()」で関数「pgscroll()」を5/1000秒おきに繰り返し呼び出せば、ホームページを横に自動スクロールできます。

<SCRIPT language="JavaScript">
<!--
x=0;
function pgscroll(){
x++;
scrollTo(x,0);
setTimeout("pgscroll()",5);
}
// -->
</SCRIPT>

サンプルページ


e[NECir Yahoo yV LINEf[^[z500~`I
z[y[W NWbgJ[h COiq@COsI COze